<template>
  <div class="survey-modal-overlay" @click.self="$emit('close')">
    <div class="survey-modal-container">
      <div class="survey-modal-header">
        <h2 class="survey-modal-title">兴趣类别调查</h2>
        <button class="survey-close-btn" @click="$emit('close')">&times;</button>
      </div>
      <div class="survey-modal-body">
        <p class="survey-modal-description">请选择您感兴趣的类别（可多选）：</p>
        
        <div class="categories">
          <div 
            class="category-item" 
            v-for="category in categories" 
            :key="category.value"
            :class="{ 'selected': selectedCategories.includes(category.value) }"
          >
            <input 
              type="checkbox" 
              :id="'category-'+category.value" 
              :value="category.value" 
              v-model="selectedCategories"
              class="category-checkbox"
              hidden
            >
            <label 
              :for="'category-'+category.value" 
              class="category-label"
            >
              {{ category.label }}
            </label>
          </div>
        </div>
      </div>
      <div class="survey-modal-footer">
        <button 
          type="button" 
          class="survey-modal-btn survey-skip-btn" 
          @click="handleSkip"
        >
          跳过此问题
        </button>
        <button 
          type="button" 
          class="survey-modal-btn survey-submit-btn" 
          @click="handleSubmit"
          :disabled="selectedCategories.length === 0"
        >
          提交选择
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Questionnaire",
  data() {
    return {
      selectedCategories: [],
      categories: [
        { value: '房产', label: '房产' },
        { value: '理财', label: '理财' },
        { value: '艺术', label: '艺术' },
        { value: '文化', label: '文化' },
        { value: '游戏', label: '游戏' },
        { value: '时尚', label: '时尚' },
        { value: '教育', label: '教育' },
        { value: '美国职业篮球', label: '美国职业篮球' },
        { value: '国际足球', label: '国际足球' },
        { value: '国内足球', label: '国内足球' },
        { value: '中国职业篮球', label: '中国职业篮球' },
        { value: '手机', label: '手机' },
        { value: '家电', label: '家电' },
        { value: '科技', label: '科技' },
        { value: '电视剧', label: '电视剧' },
        { value: '音乐', label: '音乐' },
        { value: '电影', label: '电影' },
        { value: '人工智能', label: '人工智能' },
        { value: '数码', label: '数码' },
        { value: '国内', label: '国内' },
        { value: '国际', label: '国际' },
        { value: '航空', label: '航空' },
        { value: '军事', label: '军事' },
        { value: '股票', label: '股票' },
        { value: '商业', label: '商业' },
        { value: '基金', label: '基金' }
      ]
    }
  },
  methods: {
    handleSubmit() {
      if (this.selectedCategories.length > 0) {
        this.$emit('submit', this.selectedCategories)
      }
    },
    handleSkip() {
      this.selectedCategories = [] // 清空用户的选择
      this.$emit('skip', this.selectedCategories)
    }
  }
}
</script>

<style scoped>
.survey-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
  animation: fadeIn 0.3s ease-out;
  overflow: hidden;
}

.survey-modal-container {
  background-color: white;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  height: auto;
  max-height: 90vh;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.survey-modal-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  flex-shrink: 0;
}

.survey-modal-title {
  margin: 0;
  color: #333;
  font-size: 22px;
  text-align: center;
  font-weight: 600;
}

.survey-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  transition: color 0.2s;
}

.survey-close-btn:hover {
  color: #ff4d4f;
}

.survey-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.survey-modal-body::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.survey-modal-description {
  color: #666;
  margin-bottom: 20px;
  text-align: center;
  font-size: 16px;
}

.categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  padding: 10px;
  box-sizing: border-box;
}

.category-item {
  position: relative;
  border-radius: 8px;
  transition: all 0.2s ease;
  border: 1px solid #eee;
}

.category-item:hover {
  border-color: #ff4d4f;
}

.category-item.selected {
  background-color: #fff5f5;
  border-color: #ff4d4f;
}

.category-label {
  display: block;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: color 0.2s;
}

.category-item.selected .category-label {
  color: #ff4d4f;
  font-weight: 500;
}

.survey-modal-footer {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
}

.survey-modal-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s;
}

.survey-skip-btn {
  background-color: #f5f5f5;
  color: #666;
}

.survey-skip-btn:hover {
  background-color: #e0e0e0;
}

.survey-submit-btn {
  background-color: #ff4d4f;
  color: white;
}

.survey-submit-btn:hover:not(:disabled) {
  background-color: #ff4d4f;
}

.survey-submit-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .survey-modal-container {
    max-height: 95vh;
  }
  
  .categories {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  
  .survey-modal-title {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .survey-modal-container {
    width: 95%;
    max-height: 95vh;
  }
  
  .categories {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .survey-modal-footer {
    flex-direction: column;
    gap: 10px;
  }
  
  .survey-modal-btn {
    width: 100%;
  }
  
  .survey-modal-title {
    font-size: 18px;
  }
  
  .survey-modal-description {
    font-size: 14px;
  }
}
</style>